<template>
    <div class="todo-item">
      <input type="checkbox" :checked="completed" @change="toggleCompletion">
      <span :class="{ completed: completed }">{{ title }}</span>
      <button @click="removeTodo">删除</button>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      title: {
        type: String,
        required: true
      },
      completed: {
        type: Boolean,
        required: true
      }
    },
    methods: {
      toggleCompletion() {
        this.$emit('update:completed', !this.completed);
      },
      removeTodo() {
        this.$emit('remove-todo');
      }
    }
  };
  </script>
  
  <style scoped>
  .todo-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .todo-item input,
  .todo-item span,
  .todo-item button {
    margin: 0 5px; /* 调整元素之间的间距 */
  }
  
  .completed {
    text-decoration: line-through;
  }
  </style>